<template>
   <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";
import { rightTop } from "@/api/modules";
import { color } from "echarts";

const option = ref({})
function getData(){
    rightTop().then((res)=>{
        console.log('右上报警次数===>',res);
        let data =res.data
        if(res.success){
            setOption(data.dateList,data.numList,data.numList2)
        }else{
            ElMessage({
                message: res.msg,
                type: "warning",
            })
        }
    }).catch(err=>{
        ElMessage.error(err)
    })
}


function setOption(xData:any[],yData:any[],yData2:any[]){
    option.value={
        xAxis:{
            type:'category',
            data:xData,
            boundaryGap:false,//不留白从原点开始
            splitLine:{
                show:true,
                lineStyle:{
                    color:'rgba(34,99,163,0.2)'
                }
            },
            axisLine: {
                // show:false,
                lineStyle: {
                color: "rgba(31,99,163,.1)",
                },
            },
            axisLabel: {
                color: "#7EB7FD",
                fontWeight: "500",
            },
        },
        yAxis: {
            type: "value",
            splitLine: {
                show: true,
                lineStyle: {
                color: "rgba(31,99,163,.2)",
                },
            },
            axisLine: {
                lineStyle: {
                color: "rgba(31,99,163,.1)",
                },
            },
            axisLabel: {
                color: "#7EB7FD",
                fontWeight: "500",
            },
            },
            tooltip:{
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                    color: "#FFF",
                },
            },
            grid:{
                //布局、
                show:true,
                left:'10px',
                right:'30px',
                bottom:'10px',
                top:'32px',
                containLabel:true,
                borderColor:'#1f63A3'
            },
            series:[
                {
                    data:yData,
                    type:'line',
                    smooth:true,
                    symbol:'none',//去除点
                    name:'报警1次数',
                    color:'rgba(252,144,16,0.7)',
                    areaStyle:{
                        color: new graphic.LinearGradient(0,0,0,1,[
                            {offset:0,color:'rgba(252,144,16,0.7)'},
                            {offset:1,color:'rgba(252,144,16,0)'}
                        ],false)
                    },
                    markPoint:{
                        data:[
                        {
                                name:'最大值',
                                type:'max',
                                valueDim:'y',
                                symbol:'rect',
                                symbolSize:[60,26],
                                symbolOffset:[0,-20],
                                itemStyle:{
                                    color:'rgba(0,0,0,0)'
                                },
                                label:{
                                    color:'#fc9010',
                                    backgroundColor:'rgba(252,144,16,0.1)',
                                    borderRaius:6,
                                    padding:[7,14],
                                    borderWidth:0.5,
                                    borderColor:'rgba(252,144,16,0.5)',
                                    formatter:'报警1：{c}'
                                }
                            },
                            {
                                name:'最大值',
                                type:'max',
                                valueDim:'y',
                                symbol:'circle',
                                symbolSize:6,
                                itemStyle:{
                                    color: "#FC9010",
                                    shadowColor: "#FC9010",
                                    shadowBlur: 8,
                                },
                                label:{
                                    formatter: "",
                                }
                            },
                        ]
                    }
                },{
                    data:yData2,
                    type:'line',
                    smooth:true,
                    symbol:'none',//去除点
                    name:'报警2次数',
                    color:'rgba(9,202,243,0.7)',
                    areaStyle:{
                        color: new graphic.LinearGradient(0,0,0,1,[
                            {offset:0,color:'rgba(9,202,243,0.7)'},
                            {offset:1,color:'rgba(9,202,243,.0)'}
                        ],false)
                    },
                    markPoint:{
                        data:[
                        {
                                name:'最大值',
                                type:'max',
                                valueDim:'y',
                                symbol:'rect',
                                symbolSize:[60,26],
                                symbolOffset:[0,-20],
                                itemStyle:{
                                    color:'rgba(0,0,0,0)'
                                },
                                label:{
                                    color:'#09CAF3',
                                    backgroundColor:'rgba(9,202,243,0.1)',
                                    borderRaius:6,
                                    padding:[7,14],
                                    borderWidth:0.5,
                                    borderColor:'rgba(9,202,243,0.5)',
                                    formatter:'报警2：{c}'
                                }
                            },
                            {
                                name:'最大值',
                                type:'max',
                                valueDim:'y',
                                symbol:'circle',
                                symbolSize:6,
                                itemStyle:{
                                    color: "#09CAF3",
                                    shadowColor: "#09CAF3",
                                    shadowBlur: 8,
                                },
                                label:{
                                    formatter: "",
                                }
                            },
                        ]
                    }
                },
            ]
    }
}

onMounted(()=>{
    getData()
})

</script>

<style scoped lang="scss">

</style>